<template>
    <div class="diceContent" @click="go3D">
        <div class="diceBox" ref="mount"></div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, defineEmits, onBeforeUnmount } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import * as THREE from 'three';
import useSettingStore from '@/store/modules/setting'
const settings = useSettingStore()


const props = defineProps({
    // videoVal: {
    //     type: String,
    //     default: ''
    // },
})

const emit = defineEmits(['go3D'])

const videoPlayer = ref<any>(null);

const go3D = () => {
    emit('go3D')
}

const route = useRoute()
const router = useRouter()

const mount = ref<any>(null);

const init = () => {
    if (mount.value) {
        const width = mount.value.clientWidth;
        const height = mount.value.clientHeight;
    
        // 创建场景
        const scene = new THREE.Scene();
    
        // 创建相机
        const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
        camera.position.z = 5;
    
        // 创建渲染器并设置大小
        const renderer = new THREE.WebGLRenderer();
        renderer.setSize(width, height);
        mount.value.appendChild(renderer.domElement);
    
        // 创建几何体和材质
        const geometry = new THREE.BoxGeometry(); // 可以改为SphereGeometry等
        const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
        const cube = new THREE.Mesh(geometry, material);
        scene.add(cube);
    
        // 添加光源
        const light = new THREE.AmbientLight(0x404040); // 环境光
        scene.add(light);
    
        // 渲染循环函数
        const animate = () => {
        requestAnimationFrame(animate);
        cube.rotation.x += 0.01; // X轴旋转
        cube.rotation.y += 0.01; // Y轴旋转
        renderer.render(scene, camera); // 重新渲染场景和相机
        };
        animate(); // 开始动画循环
    }
}

onMounted(() => {
    // settings.handlerHeaderShow(false)
    init()
})

onBeforeUnmount(() => {
    // settings.handlerHeaderShow(true)
})

</script>


<style lang="scss" scoped>
.diceContent {
    width: 100%;
    height: 100%;
    overflow: hidden;
    // background-color: #000;
    .diceBox {
        width: 100%;
        height: 100%;
    }
}
</style>